<template>
  <div id="home">
    <div @click="ToBackSystem" class="ToBackSystem">进入后台</div>
    <!-- 标题部分 -->
    <div class="Title"></div>
    <!-- 页面主体部分 -->
    <div class="Body">
      <div class="left">
        <div class="top">
          <DeviceStatistics />
        </div>
        <div class="mid">
          <Webcasts />
        </div>
        <div class="bottom1">
          <LEDShow />
        </div>
      </div>
      <!-- 中间监控部分 -->
      <div ref="MIDMontitoring" class="MIDMontitoring">
        <MIDMontitoring v-on:SeeMoreBig="showMsgfromMidMontChild" />
      </div>
      <div class="center">
        <Center />
      </div>
      <div class="right">
        <div class="top">
          <Montitorting />
        </div>
        <div class="mid">
          <OneClickCalling />
        </div>
        <div class="bottom1">
          <EarlyWarningDynamics />
        </div>
      </div>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
import DeviceInfo from "./home/DeviceInfo.vue";
import DeviceStatistics from "./home/DeviceStatistics.vue";
import LEDShow from "./home/LEDShow.vue";
import Webcasts from "./home/Webcasts.vue";
import OneClickCalling from "./home/OneClickCalling.vue";
import EarlyWarningDynamics from "./home/EarlyWarningDynamics.vue";
import MIDMontitoring from "./home/MIDMontitoring.vue";
import Montitorting from "./home/Montitorting.vue";
import Center from "./home/Center.vue";
import { GetBigScreenUrl } from "@/api/BigScreen";

export default {
  name: "HomeView",
  created() {
    GetBigScreenUrl().then((res) => {
      this.$store.commit("BigScreen/SET_Big_Screen_Info", res.data);
    });
  },
  mounted() {
    // this.launchFullscreen();
  },
  components: {
    DeviceStatistics,
    LEDShow,
    Webcasts,
    EarlyWarningDynamics,
    OneClickCalling,
    DeviceInfo,
    MIDMontitoring,
    Center,
    Montitorting,
  },
  methods: {
    showMsgfromMidMontChild(data) {
      if (data) {
        this.$refs.MIDMontitoring.style.height = "11.15rem";
      } else {
        this.$refs.MIDMontitoring.style.height = "0";
      }
    },
    // 跳转
    ToBackSystem(e) {
      this.$router.push({ path: "/SmartLightManage" });
      this.toggleFullScreen();
    },
    // 退出全屏
    toggleFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#home {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #0c1c3c;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .ToBackSystem {
    position: absolute;
    top: 0.125rem /* 10/80 */;
    right: 1.25rem /* 100/80 */ /* 150/80 */ /* 200/80 */;
    width: 2.5rem /* 200/80 */;
    height: 0.25rem /* 20/80 */;
    font-size: 0.25rem /* 20/80 */;
    color: aqua;
    cursor: pointer;
  }
  .Title {
    width: 100vw;
    background: url(../../assets/Home/title.png);
    background-size: 100% 100%;
    height: 0.85rem /* 68/80 */;
  }
  .Body {
    flex: 1;
    padding: 0 0.5125rem /* 41/80 */ /* 41/64 */;
    position: relative;
    .left {
      z-index: 6;
      background: linear-gradient(
        130.76deg,
        rgba(8, 31, 55, 0.75) 0%,
        rgba(18, 50, 81, 0.75) 100%
      );
      border: 1.05px solid rgba(39, 80, 121, 1);
      opacity: 1;
      position: absolute;
      width: 5.375rem /* 430/80 */ /* 430/64 */;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 0.13475rem /* 10.78/80 */ 0.25rem /* 20/80 */ 0 0.25rem
        /* 20/80 */;
      .top {
        flex: 1;
        // background-color: rgb(11, 4, 4);
      }
      .mid {
        flex: 1;
        // background-color: rgb(185, 48, 48);
      }
      .bottom1 {
        flex: 1;
        // background-color: rgb(174, 173, 173);
      }
    }
    .MIDMontitoring {
      z-index: 6;
      position: absolute;
      transition-duration: 0.5s;
      left: 6.45rem /* 516/80 */;
      bottom: 0.5rem /* 40/80 */;
      width: 11.125rem /* 890/80 */;
      height: 0 /* 200/80 */;
      border: 0.0125rem /* 1/80 */ solid;
      border-image: linear-gradient(
        180deg,
        rgba(65, 146, 217, 1) 0%,
        rgba(65, 146, 217, 0.3) 34.05%,
        rgba(65, 146, 217, 0.3) 68.61%,
        rgba(65, 146, 217, 1) 100%
      );

      background: linear-gradient(
        180deg,
        rgba(8, 20, 37, 0.54) 0%,
        rgba(47, 61, 82, 0.85) 100%
      );

      // box-shadow: inset 0px 4.9px 19.6px 0.49px rgba(43, 46, 52, 0.56);
    }
    .center {
      position: absolute;
      width: 22.975rem /* 1838/80 */;
      height: 12.25rem;
      // background: url(../../assets/Home/OIPC1.jpg);
      background-size: 100% 100%;
      z-index: 4;
    }
    .right {
      z-index: 6;
      background: linear-gradient(
        130.76deg,
        rgba(8, 31, 55, 0.75) 0%,
        rgba(18, 50, 81, 0.75) 100%
      );
      border: 1.05px solid rgba(39, 80, 121, 1);
      opacity: 1;
      position: absolute;
      right: 0.5125rem;
      width: 5.375rem /* 430/80 */ /* 430/64 */;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 0.13475rem /* 10.78/80 */ 0.25rem /* 20/80 */ 0 0.25rem
        /* 20/80 */;
      .top {
        flex: 1;
        // background-color: rgb(11, 4, 4);
      }
      .mid {
        flex: 1;
        // background-color: rgb(185, 48, 48);
      }
      .bottom1 {
        flex: 1;
        // background-color: rgb(174, 173, 173);
      }
    }
  }
  .bottom {
    height: 0.4rem /* 32/80 */;
    background: url(../../assets/Home/dibu.png);
    background-size: 100% 100%;
  }
}
</style>
